<script setup lang="ts">
import { Lock, Postcard, UserFilled } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { createNonEmptyRule } from '../../utils';
import { FormInstance, FormRules } from 'element-plus';

type LoginForm = {
  userName?: string,
  password?: string,
  captcha?: string
}

const form = ref<LoginForm>({})

const rules: FormRules<LoginForm> = {
  userName: createNonEmptyRule('账号不能为空'),
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
  captcha: createNonEmptyRule('验证码不能为空')
}

const cls = 'page-entry-login'

const formRef = ref<FormInstance>()
const submit = async () => {
  await formRef.value?.validate()
}
</script>

<template>
  <ElForm :class="cls" ref="formRef" :model="form" :rules="rules">
    <ElFormItem prop="userName">
      <ElInput placeholder="账号" :prefix-icon="UserFilled" v-model="form.userName" />
    </ElFormItem>
    <ElFormItem prop="password">
      <ElInput placeholder="密码" type="password" show-password :prefix-icon="Lock" v-model="form.password" />
    </ElFormItem>
    <ElFormItem prop="captcha">
      <div>
        <ElInput placeholder="验证码" :prefix-icon="Postcard" v-model="form.captcha" />
      </div>
    </ElFormItem>
    <ElFormItem :class="`${cls}_login`">
      <ElButton type="primary" @click="submit">登 录</ElButton>
    </ElFormItem>
  </ElForm>
</template>

<style lang="scss">
.page-entry-login {
  &_login {
    margin-bottom: 0;
    .el-button {
      width: 100%;
    }
  }
}
</style>
